<template>
	<view class="u-calendar-header">
		<!-- u-border-bottom -->

		<view class="u-calendar-header__subtitle" v-if="showSubtitle">
			<view class="" @click="addday(-1)">
				上一月
			</view>
			<view @click="modalshow">
				{{ subtitle }}
			</view>
			<view class="" @click="addday(1)">
				下一月
			</view>
		</view>
		<!-- 	<u-navbar v-if="showTitle">
			<template #center>
				<view style="
            display: flex;
            flex-direction: row;
            align-items: center;
            font-weight: bold;
          " @click="modalshow">
					<text style="margin-right: 8rpx">{{ subtitle }}</text>
					<u-icon name="arrow-down-fill" color="#C1C5C9" size="12"></u-icon>
				</view>
			</template>
		</u-navbar> -->
		<view class="u-calendar-header__subtitle2" v-if="!showSubtitle" @click="modalshow">
			<view class="u-flex text">
				{{ subtitle }}123
				<!-- {{ defaultDate }}55 -->
				<u-icon style="margin-left: 12rpx" name="arrow-down-fill" color="rgba(193, 197, 201, 1)"
					size="12px"></u-icon>
			</view>
			<!-- <u--image
        :src="$z.imgsrc('calendar-logo.png')"
        width="97px"
        height="38.5px"
      ></u--image> -->
		</view>
		<view class="u-calendar-header__weekdays">
			<text class="u-calendar-header__weekdays__weekday">日</text>
			<text class="u-calendar-header__weekdays__weekday">一</text>
			<text class="u-calendar-header__weekdays__weekday">二</text>
			<text class="u-calendar-header__weekdays__weekday">三</text>
			<text class="u-calendar-header__weekdays__weekday">四</text>
			<text class="u-calendar-header__weekdays__weekday">五</text>
			<text class="u-calendar-header__weekdays__weekday">六</text>
		</view>
		<u-datetime-picker :show="show" v-model="datetimevalue" mode="date" @confirm="confirm"
			@close="close"></u-datetime-picker>
	</view>
</template>

<script>
	import dayjs from "../../libs/util/dayjs.js";
	export default {
		name: "u-calendar-header",
		mixins: [uni.$u.mpMixin, uni.$u.mixin],
		props: {
			// 标题
			title: {
				type: String,
				default: "",
			},
			// 副标题
			subtitle: {
				type: String,
				default: "",
			},
			// 是否显示标题
			showTitle: {
				type: Boolean,
				default: false,
			},
			// 是否显示副标题
			showSubtitle: {
				type: Boolean,
				default: true,
			},
			// 默认选中的日期，mode为multiple或range是必须为数组格式
			selected: {
				type: Array,
				default: null,
			},
			months:  {
				type: Array,
				default: () => {
					return [];
				},
			},
		},
		data() {
			return {
				show: false,
				datetimevalue: Number(new Date()),
			};
		},
		methods: {
			name() {},
			modalshow() {
				console.log(123);
				let defaultDate = this.selected ? this.selected[0] : new Date();
				this.datetimevalue = Number(dayjs(defaultDate));
				this.show = true;
			},
			confirm(data) {
				this.$emit("monthSelected", [dayjs(data.value).format("YYYY-MM-DD")]);
				this.show = false;
			},
			addday(num){
				console.log(this.selected[0],this.$u.timefn.gettimemmt2(t,num));
				let t=this.selected[0]
				this.$emit("monthSelected", [this.$u.timefn.gettimemmt2(t,num)]);
			
			},
			close() {
				console.log("close");
				this.show = false;
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "../../libs/css/components.scss";

	.u-calendar-header {
		padding-bottom: 4px;

		&__title {
			font-size: 16px;
			color: $u-main-color;
			text-align: center;
			height: 42px;
			line-height: 42px;
			font-weight: bold;
		}

		&__subtitle {
			font-size: 14px;
			color: $u-main-color;
			height: 40px;
			text-align: center;
			line-height: 40px;
			font-weight: bold;
			display: flex;
			flex-direction: initial;
			justify-content: space-between;
		}

		&__subtitle2 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 18px;
			padding-left: 12px;
			color: $u-main-color;
			height: 56px;
			// text-align: left;
			// line-height: 56px;
			font-weight: bold;
			display: flex;
			flex-direction: initial;

			.text {
				flex-direction: initial;
			}
		}

		&__weekdays {
			@include flex;
			justify-content: space-between;

			&__weekday {
				font-size: 13px;
				color: rgba(131, 133, 137, 1);
				line-height: 30px;
				flex: 1;
				text-align: center;
			}
		}
	}
</style>